<%--
  Created by IntelliJ IDEA.
  User: MySunshine
  Date: 2022/10/26
  Time: 11:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户管理</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <style>
        body{
            background-color:  #243b55;
        }
        h1{
        color: #e4a74c;
            text-align: center;
            padding: 40px;
        }

    </style>
</head>
<body>

<div class="layui-row layui-col-md10 layui-col-md-offset1 " >
    <h1>用户管理</h1>
<table class="layui-table" id="data" lay-filter="tableFil" ></table>
</div>
</body>
<script src="../../layui/layui.js"></script>
<script>
    layui.use(['table','jquery','layer'],function () {
        let layer = layui.layer;
        let table = layui.table;
        let $ = layui.jquery;
        let t=table.render({
            elem: "#data",
            url: "/UserSelectAllByDba",
            cols: [[
                {type: "numbers", title: "序号", width:"5%"},
                {field: "img", title: "头像", width:"10%",templet:"<div ><P style='display: none; '>{{d.img==null?d.img='1.jpg':d.img}}</P><img src='../../userimg/{{d.img}}' alt='' style='width:40px;height:40px;border-radius: 50%'></div>"},
                {field: "unum", title: "账号", width:"10%"},
                {field: "name", title: "姓名", width:"10%"},
                {field: "age", title: "年龄", width:"5%"},
                {field: "sex", title: "性别", width:"5%"},
                {field: "phone", title: "电话", width:"10%"},
                {field: "startime", title: "注册日期", width:"10%",templet:"<div><div>{{layui.util.toDateString(d.startime, 'yyyy-MM-dd')}} </div>"},
                {field: "kid", title: "喜爱书籍类型编号", width:"15%",},
                {title: "操作", toolbar: "#rowToolBar", width:"20%"},
            ]],
            page:{
                limit:3,
                limits:[3,5,10],
                layout:['prev','page','next','limit','refresh','skip']
            },
            size:'lg',
            toolbar:"#tabTop",
        })
        table.on('tool(tableFil)',function (obj) {
            let data = obj.data;
            let event = obj.event;
            switch (event) {
                case "update":
                    layer.open({
                        type: 1,
                        content:
                            "<div class=\"layui-row layui-col-md6 layui-col-md-offset3 \" >"+
                            "<form action='/UserUpdateByNum'>账号： <input type='text' name='num' readonly value='"+data.unum+"'> " +
                            "<br> 姓名： <input type='text' name='name' value='"+data.name + "'>" +
                            "<br> 密码： <input type='password' name='pwd'  value='"+data.pwd+"'>" +
                            "<br> 年龄： <input type='text' name='age'  value='"+data.age+"'>" +
                            "<br> 性别： <select name='sex'>" +
                            "                <option value='"+data.sex+"'>"+data.sex+"</option>" +
                            "                <option value='男'>男</option>" +
                            "                <option value='女'>女</option>" +
                            "            </select>" +
                            "<br> 电话： <input type='text' name='phone'  value='"+data.phone+"'>" +
                            "<br> " +
                            "    喜好：    <select name='kid'>" +
                            "                <option value='"+data.kind+"'>若更改，请选择</option>" +
                            "                <option value='1'>世界名著</option>" +
                            "                <option value='2'>武侠小说</option>" +
                            "                <option value='3'>推理小说</option>" +
                            "                <option value='4'>历史小说</option>" +
                            "                <option value='5'>言情小说</option>" +
                            "                <option value='6'>科幻小说</option>" +
                            "                <option value='8'>恐怖小说</option>" +
                            "            </select>" +
                            " <br><br> <button class='layui-btn layui-btn-normal' style='position: absolute ; left:60px' type='submit'>提交</button> " +
                            "</form></div> ",
                        area:['500px','300px']
                    })
                    break
                case "del":
                    console.log(data.unum)
                    layer.confirm('确认删除码?',function () {
                        location.href = "/UserDeleteByNum?num="+data.unum;
                    })
                    break
            }
        })
      table.on('toolbar(tableFil)',function (obj) {
        let event = obj.event;
        switch (event) {
            case 'add':
                layer.confirm('进入注册界面?',function () {
                    location.href = "/KindSelectAll"
                })
                break;
            case 'query':
                let name=$("#name").val();
                console.log(name)
                if (name<=0){
                    layer.msg("请输入需要查询的数据")
                    return;
                }
                t.reload({
                    where:{
                        key:name,
                    },
                    done:function (resp) {//接收查询后返回的数据(DataModel)
                        console.log(resp.msg)
                        $("#name").attr("value",name)
                    }
                })
                break;
        }
    })
        })
</script>
<script type="text/html" id="rowToolBar">
    <button class="layui-btn layui-btn-warm" style="width:90px" lay-event="update">
        修改
    </button>
    <button class="layui-btn layui-btn-danger" style="width:90px" lay-event="del">
        <span class="layui-icon layui-icon-delete"></span>
        删除
    </button>
</script>
<script type="text/html" id="tabTop">
    <button class="layui-btn layui-btn-warm "  onclick="window.history.back(-1)">
        返回
    </button>
    <button class="layui-btn layui-btn-normal" lay-event="add">
        添加
    </button>
    <button class="layui-btn layui-btn-normal" style="float: right" lay-event="query">
        <span class="layui-icon layui-icon-search"></span>
        查询
    </button>

    <div class="layui-input-inline" style="float: right">
     <input type="text" class="layui-input" placeholder="输入姓名" id="name">

    </div>
</script>
</html>
